<template>
  <div class="cart">
    <!-- 购物车商品为空显示 -->
    <van-empty
      v-if="cart.length === 0"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="您的购物车空空如也"
    />
    <!-- 购物车商品数据 -->
    <template v-else>
      <!-- 购物车商品 -->
      <van-swipe-cell
        v-for="prod in cart"
        :key="prod.id"
      >

        <van-card
          :price="prod.price"
          :desc="prod.desc"
          :title="prod.title"
          class="goods-card"
        >
         <template #thumb>
            <van-checkbox :value="prod.checked" @click="toggleChecked(prod.id)"></van-checkbox>
            <div class="van-image" style="width: 80%; height: 100%;">
              <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
            </div>
          </template>
        <template #num>
          <van-stepper
          :value="prod.amount"
          theme="round"
          button-size="22"
          @change="changeValue(prod.id,$event)"
          />
        </template>
       </van-card>
        <template #right>
          <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(prod.id)"
          />
        </template>
      </van-swipe-cell>
    </template>
    <!-- 提交订单 -->
<van-submit-bar :price="totalMoney" @submit="onSubmit" button-text="提交订单" >
  <van-checkbox :value="allChecked" @click="checkedAll">全选</van-checkbox>
  <template #tip>
    你的收货地址不支持同城送, <span >修改地址</span>
  </template>
</van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  data() {
    return {
      checked: false,
    }
  },
  computed: {
    ...mapGetters(['allChecked', 'totalMoney']),
    cart() {
      return this.$store.state.cart
    },

  },
  methods: {
    ...mapMutations(['remove', 'changeAmount', 'toggleChecked', 'toggleCheckedAll']),
    // 删除商品数据
    del(id) {
      this.remove(id)
    },
    // 改变商品数量
    changeValue(id, value) {
      console.log(id, value)
      this.changeAmount({ id, value })
    },
    // 改变选中状态
    checkedAll() {
      this.toggleCheckedAll(this.allChecked)
    },
    onSubmit() {
      // this.$router.push({
      //   path: '/confirm',
      //   query: {
      //     id: 5,
      //   },
      // })
      this.$router.push('/confirm')
    },
  },
}
</script>

<style lang="less" scoped>
  .goods-card {
    margin: 0;
    height: 100%;
    background-color: #fff;
  }

  .delete-button {
    height: 100% ;
  }
    /deep/ .van-card__thumb {
    width: 240px;
    display: flex;
    justify-content: space-between;
  }
</style>
